<template>
  <div class="introduce">
    <div class="title">
      <div class="des">
        <img :src="logo" alt="" />
        <div class="text">
          <p>{{ name }}</p>
          <span v-if="type === 1">瀑布式协作项目</span>
          <span v-else>软件敏捷开发项目</span>
        </div>
        <div class="level">lv{{ level }}</div>
      </div>
      <div class="modify">
        <button class="cancel" @click="changeEdit" v-if="edit === true">
          取消
        </button>
        <button
          class="edit"
          @click="changeEdit"
          v-if="(edit === false && userType === 1) || (edit === false && label === 2 && nowUserType === 1)"
        >
          编辑
        </button>
        <button class="finish" @click="saveEdit(text)" v-if="edit === true">
          完成
        </button>
      </div>
    </div>
    <div class="desarea">
      <div class="content">
        <section v-if="edit === false" v-html="text"></section>
        <wang-editor
          :content="text"
          @getEditorContent="getEditorContent"
          v-else
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getintroduce } from '@/api/project/introduce';
import { updateProject } from '@/api//project/buildProject';
import WangEditor from '@/components/wang-editor';
export default {
  name: 'introduce',
  data() {
    return {
      // 使用者类型
      userType: Number(sessionStorage.getItem('usertype')),
      // 编辑器内容
      newHtml: '',
      edit: false,
      newData: {
        project: {
          content: '',
          id: 0,
          name: '',
          createdid: null
        },
        projectuserList: [
          {
            createtime: '',
            evaluationroleid: 0,
            id: 0,
            projectid: 0,
            rolename: '',
            type: 0,
            userid: 0
          }
        ]

      },
      name: '',
      type: 0,
      level: 1,
      logo: '',
      id: 0,
      intro: {
      },
      text: '',
      label: '', // 项目类型  1.模板项目 2.自建项目 3.复制项目
      nowUserType: 0
    };
  },
  components: {
    WangEditor
  },
  mounted() {
    getintroduce(Number(localStorage.getItem('projectId'))).then(res => {
      console.log('项目介绍', res);
      this.text = res.data.content;
      this.name = res.data.name;
      this.type = res.data.type;
      this.level = res.data.level;
      this.logo = res.data.logo;
      this.id = res.data.id;
    });
  },
  methods: {
    changeEdit() {
      this.edit = !this.edit;
    },
    // 获取编辑器的内容
    getEditorContent(data) {
      console.log('data', data);
      this.text = data;
    },
    // 完成编辑
    saveEdit(data) {
      this.$confirm('是否完成编辑?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.content = data;
        this.newData.project.content = data;
        this.newData.project.name = this.name;
        this.newData.project.id = this.id;
        this.newData.project.createdid = sessionStorage.getItem('userid');

        let update = JSON.stringify(this.newData);
        updateProject(update).then(res => {
          console.log('修改保存成功', this.newData, res);
          this.edit = !this.edit;
        });
        this.$message({
          showClose: true,
          type: 'success',
          message: '编辑内容已保存!'
        });
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '继续编辑'
        });
      });
    }
  },
  created() {
    this.label = Number(sessionStorage.getItem('projectLabel'));
    this.nowUserType = Number(sessionStorage.getItem('nowUserType'));
  }
};
</script>

<style lang="less" scoped>
.introduce {
  width: 100%;
  min-height: 836px;
  background-color: #ffffff;
  box-shadow: 1px -2px 3px 0px rgba(153, 153, 153, 0.5),
    1px 2px 3px 0px rgba(153, 153, 153, 0.5);
  border-radius: 0 5px 5px 5px;
  margin-top: -4px;

  .title {
    width: 98%;
    height: 45px;
    margin: 0 auto;
    padding-top: 36px;
    margin-bottom: 38px;
    position: relative;
    .des {
      width: 440px;
      height: 45px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      img {
        width: 45px;
        height: 45px;
      }
      .text {
        margin-left: 20px;
        p {
          margin: 0;
          font-size: 16px;
          font-weight: 400;
          color: #222222;
          line-height: 28px;
        }
        span {
          font-size: 14px;
          font-weight: 400;
          color: #555555;
          line-height: 20px;
        }
      }
      .level {
        align-self: flex-start;
        text-align: center;
        font-size: 12px;
        font-family: SukhumvitSet-Bold, SukhumvitSet;
        font-weight: bold;
        color: #ffffff;
        line-height: 22px;
        width: 59px;
        height: 22px;
        background: #e8f8ec;
        border-radius: 9px;
        margin-top: 5px;
        margin-left: 20px;
      }
    }
  }
  .modify {
    width: auto;
    height: 40px;
    position: absolute;
    top: 36px;
    right: 0px;
    button {
      width: 115px;
      height: 40px;
      font-size: 16px;
      font-weight: 400;
      line-height: 40px;
      text-align: center;
      border-radius: 4px;
      margin-left: 18px;
      cursor: pointer;
    }
    .cancel {
      background: #e8f8fb;
      color: #2fc0e0;
    }
    .edit {
      background: #2fc0e0;
      color: #ffffff;
      box-shadow: 0 0 5px #2fc0e0;
    }
    .finish {
      background: #2fc0e0;
      color: #ffffff;
      box-shadow: 0 0 5px #2fc0e0;
    }
  }
  .desarea {
    width: 98%;
    min-height: 500px;
    margin: 0 auto;

    h3 {
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: normal;
      color: #222222;
      line-height: 25px;
    }
    .content {
      width: 100%;
      // height: 611px;
      background: #ffffff;
      wang-editor {
        height: 100% !important;
      }
      /deep/.w-e-text-container {
        height: 560px !important;
      }
      section {
        width: 98%;
        height: 611px;
        margin: 0 auto;
        margin-top: 16px;
        border: 1px solid #dae1fd;
        background: #ffffff;
        overflow: auto;
      }
    }
  }
}
</style>
